<div class="margin-top">
    <!-- <div class="row margin-top-lg">
        <div class="col-lg-2 padding-right-xs padding-left-xl">
            <input v-model="ownerDetailChargeOrderInfo.roomNum" type="text" :placeholder="vc.i18n('请填写房屋编号','ownerDetailChargeOrder')"
                class="form-control">
        </div>
        <div class="col-lg-2 padding-right-xs padding-right-xl">
            <button type="button" class="btn btn-primary btn-sm" style="margin-left:10px"
                v-on:click="_qureyRoomDetailAccessControl()">
                <i class="fa fa-search"></i>查询
            </button>
        </div>

        <div class="col-lg-8 text-right">
             <button type="button" class="btn btn-primary btn-sm" style="margin-left:10px" v-if="vc.hasPrivilege('502023021978930012')" v-on:click="_openAddOwnerRoom()">
                <vc:i18n name="交房" namespace="simplifyRoomFee"></vc:i18n>
            </button> 

        </div>
    </div> -->
    <div class="margin-top">
        <table class="footable table table-stripped toggle-arrow-tiny" data-page-size="15">
            <thead>
                <tr>
                    <th class="text-center">
                        <vc:i18n name='编号' namespace='ownerDetailChargeOrder'></vc:i18n>
                    </th>
                    <th class="text-center">
                        <vc:i18n name='名称' namespace='ownerDetailChargeOrder'></vc:i18n>
                    </th>
                    <th class="text-center">
                        <vc:i18n name='手机号' namespace='ownerDetailChargeOrder'></vc:i18n>
                    </th>
                    <th class="text-center">
                        <vc:i18n name='充电桩' namespace='ownerDetailChargeOrder'></vc:i18n>
                    </th>
                    <th class="text-center">
                        <vc:i18n name='插槽' namespace='ownerDetailChargeOrder'></vc:i18n>
                    </th>
                    <th class="text-center">
                        <vc:i18n name='充电小时' namespace='ownerDetailChargeOrder'></vc:i18n>
                    </th>
                    <th class="text-center">
                        <vc:i18n name='充电量' namespace='ownerDetailChargeOrder'></vc:i18n>
                    </th>
                    <th class="text-center">
                        <vc:i18n name='开始时间' namespace='ownerDetailChargeOrder'></vc:i18n>
                    </th>
                    <th class="text-center">
                        <vc:i18n name='结束时间' namespace='ownerDetailChargeOrder'></vc:i18n>
                    </th>
                    <th class="text-center">
                        <vc:i18n name='扣款账户' namespace='ownerDetailChargeOrder'></vc:i18n>
                    </th>
                    <th class="text-center">
                        <vc:i18n name='小时电价' namespace='ownerDetailChargeOrder'></vc:i18n>
                    </th>
                    <th class="text-center">
                        <vc:i18n name='扣款金额' namespace='ownerDetailChargeOrder'></vc:i18n>
                    </th>
                    <th class="text-center">
                        <vc:i18n name='插座状态' namespace='ownerDetailChargeOrder'></vc:i18n>
                    </th>
                    <th class="text-center">
                        <vc:i18n name='说明' namespace='ownerDetailChargeOrder'></vc:i18n>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="chargeMachineOrder in ownerDetailChargeOrderInfo.orders">
                    <td class="text-center">{{chargeMachineOrder.orderId}}</td>
                    <td class="text-center">{{chargeMachineOrder.personName}}</td>
                    <td class="text-center">{{chargeMachineOrder.personTel}}</td>
                    <td class="text-center">{{chargeMachineOrder.machineName}}</td>
                    <td class="text-center">{{chargeMachineOrder.portName}}</td>
                    <td class="text-center" v-if="chargeMachineOrder.chargeHours == 999">按量充电</td>
                    <td class="text-center" v-else>{{chargeMachineOrder.chargeHours}}小时</td>
                    <td class="text-center">{{chargeMachineOrder.energy}}</td>
                    <td class="text-center">{{chargeMachineOrder.startTime}}</td>
                    <td class="text-center">{{chargeMachineOrder.endTime}}</td>
                    <td class="text-center hand">{{chargeMachineOrder.acctDetailId}} (
                        <a href="javascript:void(0)" @click="_viewAccount(chargeMachineOrder)">查看</a>)
                    </td>
                    <td class="text-center">{{chargeMachineOrder.durationPrice}}</td>
                    <td class="text-center">{{chargeMachineOrder.amount}}(<a href="javascript:void(0)"
                            @click="_viewOrderAccts(chargeMachineOrder)">明细</a>)</td>
                    <td class="text-center">{{chargeMachineOrder.stateName}}
                        <span v-if="chargeMachineOrder.state == '1001'">
                            (<a href="javascript:void(0)" @click="_showStopCharge(chargeMachineOrder)">停止充电</a>)
                        </span>
                    </td>
                    <td class="text-center">
                        <div style="width: 200px;">{{chargeMachineOrder.remark || '-'}}</div>
                    </td>
                </tr>
            </tbody>
        </table>
        <!-- 分页 -->
        <div class="row">
            <div class="col-sm-4">

            </div>
            <div class="col-sm-8">
                <vc:create namespace="ownerDetailChargeOrder" path="frame/paginationPlus"></vc:create>
            </div>
        </div>
    </div>
</div>